import {CCard} from '@/components/card'
import {CnMediumP, CnMediumSpan, CnNormalP, CnNormalSpan} from '@/components/text'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {getStorage} from '@/libs/localstoreage'
import {pmStatusCode2Color} from '@/libs/neumorphism'
import {to_phone_pmBaseInfo} from '@/libs/pageRedirect'
import {getSession} from '@/libs/sessionStorage'
import {zeroize} from '@/libs/toolkit'
import {PropType,reactive, toRefs, ref, defineComponent, watch, computed,onMounted} from 'vue'
// @ts-ignore
import handleImg from '../../assets/hander.png'

export const PmBaseInfoCard = defineComponent({
  props: {
    pm: {
      type: Object as PropType<MyPm.Pm>,
      required: true
    }
  },
  setup(props, ctx) {
    const {store} = useGlobalAPI()
    const loginUserInfo = computed(() => store.getters['dingding/ddUserInfo'])

    return () => (
      <CCard
        title=''
        showTitle={false}
        class='rounded-0 border-b-0 border-t-0 mb-8'
        onClick={() => {
          let userDDId = getSession('userDDId') as string

          userDDId &&
            to_phone_pmBaseInfo({
              userDDId,
              defaultPmId: props.pm.pmId
            })
        }}
      >
        <div class='flex gap-x-16'>
          <img src={loginUserInfo.value.avatar} class='w-40 h-40 rounded-full'></img>
          <div class='flex-1'>
            <CnMediumP class='mb-4'>{props.pm.pmFormName}</CnMediumP>
            <div class=''>
              {props.pm.pmScore !== undefined && props.pm.pmScore !== null ? (
                <div>
                  <CnNormalSpan>绩效结果：</CnNormalSpan>
                  <CnMediumSpan>{zeroize(props.pm.pmScore, 1)}</CnMediumSpan>
                </div>
              ) : null}

              {props.pm.pmScoreLevel !== undefined && props.pm.pmScoreLevel !== null ? (
                <div>
                  <CnNormalSpan>绩效等级：</CnNormalSpan>
                  <CnMediumSpan>{props.pm.pmScoreLevel}</CnMediumSpan>
                </div>
              ) : null}

              <CnNormalP
                style={{
                  color: pmStatusCode2Color(props.pm.pmStatusCode)
                }}
              >
                {props.pm.pmStatusName}
              </CnNormalP>
            </div>
          </div>
        </div>
      </CCard>
    )
  }
})
